import React, {PureComponent} from "react";
import {Form, Select, Input, Icon} from 'antd';
import PropTypes from "prop-types";

const Item = Form.Item;
const Option = Select.Option;

class UserForm extends PureComponent{
    static propTypes = {
        setForm: PropTypes.func.isRequired,
        roles: PropTypes.array.isRequired,
        user: PropTypes.object,
    };

    componentWillMount() {
        this.props.setForm(this.props.form)
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const {roles} = this.props;
        const user = this.props.user || {};
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 18 },
        };

        return (
            <Form {...formItemLayout} >
                <Item label='用户名：'>
                    {
                        getFieldDecorator('username', {
                            rules: [
                                { required: true, whitespace: true, message: '请输入用户名' },
                                { min: 4, message: '用户名最小长度为4' },
                                { max: 12, message: '用户名最大长度为12' },
                                { pattern: /^[0-9a-zA-Z_]+$/, message: '用户名必须是大写字母、小写字母、数字组合' }
                            ],
                            initialValue: user.username
                        }) (
                            <Input placeholder='请输入用户名'/>
                        )
                    }
                </Item>
                {
                    user._id ? null : (<Item label='密码：'>
                        {getFieldDecorator('password', {
                            rules: [
                                { required: true, whitespace: true, message: '请输入用户名' },
                                { min: 4, message: '用户名最小长度为4' },
                                { max: 12, message: '用户名最大长度为12' },
                                { pattern: /^[0-9a-zA-Z_]+$/, message: '用户名必须是大写字母、小写字母、数字组合' }
                            ],
                            initialValue: user.password
                        })(
                            <Input type='password' placeholder='请输入密码'/>
                        )}
                    </Item>)
                }
                <Item label='手机号：'>
                    {getFieldDecorator('phone', {
                        rules: [
                            { required: true, whitespace: true, message: '请输入手机号' }
                        ],
                        initialValue: user.phone
                    })(
                        <Input placeholder='请输入手机号'/>
                    )}
                </Item>
                <Item label='邮箱：'>
                    {getFieldDecorator('email', {
                        rules: [
                            { required: true, whitespace: true, message: '请输入邮箱' }
                        ],
                        initialValue: user.email
                    })(
                        <Input placeholder='请输入邮箱'/>
                    )}
                </Item>
                <Item label='角色：'>
                    {getFieldDecorator('role_id', {
                        rules: [
                            { required: true, whitespace: true, message: '请选择角色' }
                        ],
                        initialValue: user.role_id
                    })(
                        <Select>
                            {
                                roles.map(role=>(<Option key={role._id} value={role._id}>{role.name}</Option>))
                            }
                        </Select>
                    )}
                </Item>
            </Form>
        );
    }
}

export default Form.create()(UserForm);